<template>
  <div id="app" :style="sliderStyle">
    <div class="header">黑马商城</div>
    <div class="back" @click="$router.go(-1)" v-if="$route.path !== '/home'" style="left: 5px;">
      <span>
        <van-icon name="arrow-left"/>返回
      </span>
    </div>
    <div class="main">
      <!-- <van-loading type="spinner" color="#1989fa"/> -->
      <router-view></router-view>
    </div>
    <!-- 底部tab栏 -->
    <van-tabbar v-model="active" route>
      <van-tabbar-item to="/home" icon="wap-home">首页</van-tabbar-item>
      <van-tabbar-item to="/member" icon="user-o">会员</van-tabbar-item>
      <van-tabbar-item to="/shopcar" icon="cart-o">购物车</van-tabbar-item>
      <van-tabbar-item to="/search" icon="search">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      sliderStyle: {
        width: document.body.clientWidth + "px"
      }
    };
  }
};
</script>
<style lang="less">
.header {
  width: 100%;
  height: 50px;
  background: #1989fa;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 14px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}
.back {
  z-index: 2;
  position: fixed;
  top: 0;
  background-color: transparent;
  height: 50px;
  width: 50px;
  font-size: 14px;
  line-height: 50px;
  color: #fff;
  .van-icon {
    position: relative;
    top: 2px;
    left: 0;
    font-size: 16px;
    padding-right: 5px;
  }
}
.main {
  padding-top: 50px;
  margin-bottom: 50px;
}
.van-loading {
  text-align: center;
}
</style>
